<template>
    <basic-container>

        <menu-tree-form v-model="menuData" @add="add" @append="append" @edit="edit"
                        @remove="remove"
                        @submit="handleSubmit"></menu-tree-form>
    </basic-container>
</template>

<script>
    import {mapGetters} from 'vuex';
    import MenuTreeForm from "@/page/admin/menu/menu-tree-form";

    import {treeListLoad, del, save} from '@/api/admin/menu';

    export default {
        name: "index",
        components: {MenuTreeForm},
        watch: {},
        data() {
            return {
                menuData: {
                    list: [],
                    form: {parentId: 0},
                    option: {
                        column: [
                            {
                                label: "父级编码",
                                prop: "parentId",
                                value: 0,
                                disabled: true,
                                span: 24
                            }, {
                                label: "权限名称",
                                prop: "name",
                                span: 24,
                                rules: [{
                                    required: true,
                                    message: "请输入权限名称",
                                    trigger: "blur"
                                }]
                            }, {
                                label: "权限标识",
                                prop: "code",
                                span: 24,
                                rules: [{
                                    required: true,
                                    message: "请输入权限标识",
                                    trigger: "blur"
                                }]
                            }, {
                                label: "类型",
                                prop: "state",
                                span: 24,
                                type: "radio",
                                dicData: [{
                                    label: '系统',
                                    value: 1
                                }, {
                                    label: '菜单',
                                    value: 2
                                }, {
                                    label: '按钮',
                                    value: 3
                                }],
                                rules: [{
                                    required: true,
                                    message: "请输入类型",
                                    trigger: "blur"
                                }]
                            }, {
                                label: "组件地址",
                                prop: "component",
                                span: 24
                            }, {
                                label: "图标",
                                prop: "icon",
                                span: 24
                            }, {
                                label: "请求地址",
                                prop: "path",
                                span: 24
                            }, {
                                label: "权限描述",
                                prop: "des",
                                span: 24
                            }, {
                                label: "排序",
                                prop: "order",
                                span: 24
                            }]
                    }
                }
            }
        },
        methods: {
            treeLoad() {
                let dto = {};
                treeListLoad(dto).then(res => {
                    this.menuData.list = res.data.data;
                }).catch(err => {
                    this.$message.error("网络异常:" + err)
                })
            },
            add() {
                const model = {
                    parentId: 0,
                    name: null,
                    code: null,
                    component: null,
                    icon: null,
                    id: null,
                    label: null,
                    meta: null,
                    path: null,
                    state: null,
                    des: null
                };
                this.menuData.form = model;
            },
            append(data) {
                const model = {
                    parentId: data.id,
                    name: null,
                    code: null,
                    component: null,
                    icon: null,
                    id: null,
                    label: null,
                    meta: null,
                    path: null,
                    state: null,
                    des: null
                };
                this.menuData.form = model;

            },
            remove(node, data) {
                console.log(node, data);
                this.$confirm('此操作将永久删除该权限, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    del(data.id).then(res => {
                        this.$message.success("操作完成")
                    }).catch(err => {
                        this.$message.error("网络异常:" + err)
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
                setTimeout(() => {
                    this.treeLoad();
                }, 3000)
            },
            edit(data) {
                this.menuData.form = data.menu;
            },
            handleSubmit(form, done) {
                this.$message.success('3s后关闭');
                let dto = form;
                save(dto).then(res => {
                    this.$message.success("操作完成")
                }).catch(err => {
                    this.$message.error("网络异常:" + err)
                });
                setTimeout(() => {
                    this.treeLoad();
                    done()
                }, 3000)
            }
        },
        created() {
            this.treeLoad();
        }
    }
</script>

<style scoped>

</style>
